<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			body {
			  display: flex;
			  margin: 0;
			  height: 100vh;
			  justify-content: center;
			  align-items: center;
			}
			
			
			svg {
			  width: 80vmin;
			  height: 80vmin;
			}
			
			.pin {
			  animation: floating 1.5s ease-in-out infinite;
			}
			
			.pin circle[fill='#000'] {
			  animation: eye-anim 1.5s ease infinite;
			}
			
			.pin circle[fill='#000']:last-of-type {
			  animation-delay: -1s;
			}
			
			
			.pin-body {
			  animation: pin-anim 1.5s linear infinite;
			}
			
			@keyframes pin-anim {
			  0%,100% {
			    d: path('M16,20 q0,-16 16,-16 q16,0 16,16 q0, 8 -8, 16 q-8, 8 -8, 16 q0,-8 -8,-16 q-8,-8 -8,-16');
			  }
			  50% {
			    d: path('M16,20 q0,-15 16,-16 q16,1 16,16 q0, 12 -8, 16 q-8, 4 -8, 16 q0,-12 -8,-16 q-8,-4 -8,-16');
			  }
			}
			
			@keyframes eye-anim {
			  50% { transform: translateY(-1px); }
			}
			
			@keyframes floating {
			  0%, 100% {
			    transform: translateY(0);
			  }
			  
			  50% {
			    transform: translateY(4px);
			  }
			}
		</style>
	</head>
	<body>
		<svg viewBox="0 0 64 64">
		  <g class="pin" stroke="#000" fill="#f32" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round">
		  <path class="pin-body" d="M16,20 q0,-16 16,-16 q16,0 16,16
		           q0,8 -8,16 q-8,8-8,16
		           q0,-8 -8,-16 q-8,-8 -8,-16"  />
		    
		    <path d="M24,24 q0,8 8,8 q8,0 8,-8" />
		    
		    <circle cx="26" cy="16" r="3" fill="#fff" />
		    <circle cx="26.5" cy="16.5" r=".5" fill="#000" />
		    <circle cx="38" cy="16" r="3" fill="#fff" />
		    <circle cx="37.5" cy="16.5" r=".5" fill="#000" />
		  </g>
		</svg>
		<svg viewBox="0 0 64 64">
		  <g class="pin" stroke="#000" fill="#f38" stroke-width="3" stroke-linejoin="round" stroke-linecap="round">
		  <path class="pin-body" d="M16,120 q0,-16 -16,-16 q-16,0 -16,-16
		           q0,-8 -8,-16 q-8,100,66
		           q0,-8 -8,-16 q-8,-8 -8,-16"  />
		    
		    <path d="M24,24 q0,8 8,8 q8,0 8,-8" />
		    
		    <circle cx="20" cy="10" r="3" fill="#fff" />
		    <circle cx="26.5" cy="16.5" r="0.9" fill="yellow" />
		    <circle cx="45" cy="10" r="3" fill="#fff" />
		    <circle cx="37.5" cy="16.5" r="0.9" fill="yellow" />
		  </g>
		</svg>
	</body>
</html>
